<template>
</template>

<script>
//生命周期，组件基础、组件-插槽、路由Router
	// 示例组件：包含所有 Vue 生命周期钩子
	export default {
	  name: 'LifecycleDemo',
	  
	  // 初始化阶段
	  beforeCreate() {
	    console.log('1. beforeCreate：数据和事件未初始化');
	  },
	  created() {
	    console.log('2. created：已初始化数据和方法，但DOM未生成');
	    this.message = 'Hello Vue!'; // 可操作数据
	  },
	
	  // 挂载阶段
	  beforeMount() {
	    console.log('3. beforeMount：模板编译完成，但未挂载到DOM');
	  },
	  mounted() {
	    console.log('4. mounted：DOM已挂载，可操作真实DOM');
	    this.$refs.text.textContent = '已挂载'; // 操作DOM
	    setTimeout(() => {
	      this.message = 'Updated!'; // 触发更新
	    }, 1000);
	  },
	
	  // 更新阶段
	  beforeUpdate() {
	    console.log('5. beforeUpdate：数据变化，虚拟DOM重新渲染前');
	  },
	  updated() {
	    console.log('6. updated：DOM已更新，可获取最新DOM状态');
	  },
	
	  // 销毁阶段
	  beforeDestroy() {
	    console.log('7. beforeDestroy：实例销毁前，仍可操作数据');
	  },
	  destroyed() {
	    console.log('8. destroyed：实例已销毁，所有监听和子组件被移除');
	  },
	
	  // 缓存组件钩子（需包裹在<keep-alive>中）
	  activated() {
	    console.log('activated：组件被激活（从缓存中恢复）');
	  },
	  deactivated() {
	    console.log('deactivated：组件被缓存（切出视图）');
	  },
	
	  // 数据和模板
	  data() {
	    return {
	      message: ''
	    };
	  },
	  template: `
	    <div>
	      <p ref="text">{{ message }}</p>
	      <button @click="$destroy()">销毁组件</button>
	    </div>
	  `
	};
</script>

<style>
</style>